<template>
	<view class="list-item" @tap="goDetail">
		<image class="main-img" :src="url"></image>
		<view class="flex align-center justify-between margin-tb-xs">
			<text class="item-tilte">{{title}}</text>
			<image class="icon-img" src="../../static/tabBar/category_selected.png"></image>
		</view>
		<view class="flex align-center justify-between text-gray">
			<text class="">{{date}}</text>
			<text class="">荐</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props:{
			url : {
				type: String,
				default: 'https://pic.vjshi.com/2020-07-11/8eaa1a14bf9b0a37c72b2a0b69656f5c/online/main.jpg?x-oss-process=style/resize_w_285'
			},
			title : {
				type: String,
				default: '三维复古中式卷轴打开仿古地图卷轴打开'
			},
			date : {
				type: String,
				default: '20小时前'
			}
		}
		,
		methods: {
					cardSwiper(e) {
						this.cardCur = e.detail.current
					},
					goDetail(){
						uni.navigateTo({
							url: `/pages/detail/detail?id=${this.id}`
						})
					},
					goCategory(){
						uni.switchTab({
							url: '../category/category'
						})
					}
				}
	}
</script>

<style lang="scss">
	.list-item{
		width: 345upx;
		overflow: hidden;
		.main-img{
			width: 100%;
			height: 173upx;
		}
		.item-tilte{
			width: 100%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			text-align: justify;
			overflow: hidden;
		}
		.icon-img{
			width: 30upx;
			height: 30upx;
		}
	}
</style>
